<template>
  <div class="mian-bd">
    <div class="container w">
      <banner-bd-vue></banner-bd-vue>
      <common-category-vue :phoneInfo="phoneInfo"></common-category-vue>
      <common-category-vue :noteBookInfo="noteBookInfo"></common-category-vue>
    </div>
  </div>
</template>

<script>
import BannerBdVue from "./BannerBd.vue";
import CommonCategoryVue from "./CommonCategory.vue";
import { reactive} from "vue";
import { nanoid } from 'nanoid'
export default {
  name: "MainBd",
  components: {
    BannerBdVue,
    CommonCategoryVue,
  },
  setup() {


    // 手机信息
    const phoneInfo = reactive({
      title: "手机",
      imgBig: require("../../../assets/images/main/body/phone/sideImg.webp"),
      dataList: [
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/1.webp"),
          title: "Redxin 10A",
          describe: "大电量 | 大音量 | 大屏幕",
          price: "649元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/2.webp"),
          title: "Redxin K50 Pro",
          describe: "2k直屏的狠旗舰",
          price: "2999元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/3.webp"),
          title: "Xiaoxin Civi 1S",
          describe: "原生美肌人像 | 奇迹阳光动人新色 | 我最牛逼",
          price: "2299元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/4.webp"),
          title: "Redxin K50 电竞版",
          describe: "全线拉满的冷血旗舰",
          price: "2999元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/5.webp"),
          title: "Redxin K50",
          describe: "2K直屏的狠旗舰",
          price: "2399元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/6.webp"),
          title: "Xiaoxin 12",
          describe: "全新骁龙8 | 5000万主摄",
          price: "3699元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/7.webp"),
          title: "Xiaoxin K40S",
          describe: "口碑真旗舰",
          price: "1799元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/phone/phoneType/8.webp"),
          title: "Xiaoxin 12 Pro",
          describe: "全新骁龙8 | 2K AMOLED屏幕",
          price: "4699元起",
        },
      ],
    });
    //笔记本和平板信息
  
    const noteBookInfo = reactive({
      title: "笔记本 | 平板",
      imgBig: require("../../../assets/images/main/body/notebook-flat/imgBig.webp"),
      dataList: [
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/1.webp"),
          title: "Redxin 10A",
          describe: "大电量 | 大音量 | 大屏幕",
          price: "649元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/2.webp"),
          title: "Redxin K50 Pro",
          describe: "2k直屏的狠旗舰",
          price: "2999元起",
        },

        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/3.webp"),
          title: "Xiaoxin Civi 1S",
          describe: "原生美肌人像 | 奇迹阳光动人新色 | 我最牛逼",
          price: "2299元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/6.webp"),
          title: "Xiaoxin 12",
          describe: "全新骁龙8 | 5000万主摄",
          price: "3699元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/4.webp"),
          title: "Redxin K50 电竞版",
          describe: "全线拉满的冷血旗舰",
          price: "2999元起",
        },

        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/5.webp"),
          title: "Redxin K50",
          describe: "2K直屏的狠旗舰",
          price: "2399元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/6.webp"),
          title: "Xiaoxin 12",
          describe: "全新骁龙8 | 5000万主摄",
          price: "3699元起",
        },
        {
          id: nanoid(),
          img: require("../../../assets/images/main/body/notebook-flat/notebook-flat-type/7.webp"),
          title: "Xiaoxin K40S",
          describe: "口碑真旗舰",
          price: "1799元起",
        },
      ],
    });
    return { phoneInfo, noteBookInfo };
  },
};
</script>

<style lang="less" scoped>
.mian-bd {
  background-color: #f5f5f5;
  .container {
    overflow: hidden;
  }
}
</style>